0.<template>
  <div class="test-detail-container">
    <Header />
    <div class="test-detail-content">
      <div class="content-wrapper">
        <div class="back-section">
          <el-button 
            class="back-button" 
            @click="goBack"
            type="text"
            size="large"
          >
            <el-icon><ArrowLeft /></el-icon>
            返回问卷列表
          </el-button>
        </div>

        <el-card class="test-card">
          <template #header>
            <div class="test-header">
              <h2>{{ currentQuestionaire?.title }}</h2>
              <div class="test-info">
                <span><el-icon><Document /></el-icon> {{ currentQuestionaire?.questionNum }}题</span>
              </div>
            </div>
          </template>

          <div class="test-description">
            <h3>问卷说明</h3>
            <p>{{ currentQuestionaire?.introduction }}</p>
            <div class="test-notes">
              <h4>注意事项：</h4>
              <ul>
                <li>请在安静的环境下完成问卷</li>
                <li>请根据实际情况如实作答</li>
                <li>问卷过程中请勿中途退出</li>
                <li>完成后将立即生成报告</li>
              </ul>
            </div>
          </div>

          <div class="test-actions">
            <el-button type="primary" size="large" @click="startQuestionaire">
              开始问卷
            </el-button>
          </div>
        </el-card>
      </div>
    </div>
    <Footer />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import Header from '../../components/header.vue'
import Footer from '../../components/footer.vue'
import { Document, ArrowLeft } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { getQuestionaireDetail, type Questionaire } from '../../api/test'

const route = useRoute()
const router = useRouter()

const currentQuestionaire = ref<Questionaire & { questionNum?: number }>(null)

// 获取问卷详情
const fetchQuestionaireDetail = async () => {
  try {
    const questionaireId = Number(route.params.id)
    const res = await getQuestionaireDetail(questionaireId)
    if (res.code === '200') {
      currentQuestionaire.value = {
        ...res.data.questionaire,
        questionNum: res.data.questions.length
      }
    } else {
      ElMessage.error('获取问卷详情失败')
      router.push('/test')
    }
  } catch (error) {
    console.error('获取问卷详情失败:', error)
    ElMessage.error('获取问卷详情失败')
    router.push('/test')
  }
}

// 开始问卷
const startQuestionaire = () => {
  const userRole = localStorage.getItem('userRole')
  if (!userRole) {
    ElMessage.warning('请登录后再开始答题')
    // 保存当前路径用于登录后重定向
    localStorage.setItem('redirectPath', route.fullPath)
    router.push('/login')
    return
  }

  // 跳转到答题页面
  router.push({
    path: `/questionnaire/${route.params.id}/answer`,
    query: {
      title: currentQuestionaire.value?.title
    }
  })
}

onMounted(() => {
  fetchQuestionaireDetail()
})

// 返回列表
const goBack = () => {
  router.push('/test')
}
</script>

<style scoped>
.test-detail-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f7fa;
}

.test-detail-content {
  flex: 1;
  display: flex;
  justify-content: center;
  margin: 64px auto 40px;
  padding: 0 20px;
}

.content-wrapper {
  width: 800px;
}

.test-card {
  background-color: white;
  border-radius: 8px;
  width: 100%;
  margin: 0 auto;
}

.test-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.test-header h2 {
  margin: 0;
  color: #2c3e50;
  font-size: 24px;
}

.test-info {
  display: flex;
  gap: 20px;
  color: #666;
  font-size: 14px;
}

.test-info span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.test-description {
  margin: 20px 0;
}

.test-description h3 {
  color: #2c3e50;
  margin-bottom: 15px;
}

.test-description p {
  color: #666;
  line-height: 1.6;
  margin-bottom: 20px;
}

.test-notes {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 4px;
}

.test-notes h4 {
  color: #2c3e50;
  margin: 0 0 10px;
}

.test-notes ul {
  margin: 0;
  padding-left: 20px;
  color: #666;
}

.test-notes li {
  margin-bottom: 8px;
}

.test-notes li:last-child {
  margin-bottom: 0;
}

.test-actions {
  margin-top: 30px;
  text-align: center;
}

.featured-tests,
.featured-list,
.featured-item,
.featured-icon,
.featured-info,
.featured-meta {
  display: none;
}

/* 返回按钮样式 */
.back-section {
  margin-bottom: 20px;
  width: 100%;
}

.back-button {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  color: #606266;
  padding: 0;
  height: auto;
}

.back-button:hover {
  color: #409EFF;
}

.back-button .el-icon {
  font-size: 18px;
  transition: transform 0.3s;
}

.back-button:hover .el-icon {
  transform: translateX(-4px);
}
</style> 